<template>
  <div class="sliderassembly">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(items, index) in datas" :key="index" :title="items.title" :name="index + 1">
        <draggable :list="items.comList" :group="{ name: items.group, pull: 'clone', put: false }" draggable=".item" :clone="dragClone">
          <div v-for="(item, ind) in items.comList" :key="ind" class="componList item" :draggable="item.draggable"
            :data-name="item.name">
            <!-- <van-icon :name="item.vanIcon" /> -->
            <img :src="item.icon" class="iconimg" draggable="false" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </draggable>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  name: "Sliderassembly",
  props: {
    pointer: Object,
    type: String,
  },
  data () {
    return {
      activeNames: [1, 2, 3, 4] /* 侧边栏组件显示 */,
      datas: Object.freeze([
        {
          title: "选项卡容器",
          group: 'cc',
          comList: [
            {
              text: "单个容器",
              type: "1-1",
              icon: require("../../assets/img/padicon04.png"),
              name: "singleContainer",
              draggable: false,
            },
            {
              text: "左右均分",
              type: "1-2",
              icon: require("../../assets/img/padicon05.png"),
              name: "mutiEquaContainer",
              draggable: false,
            },
            {
              text: "左右不均分",
              type: "1-3",
              icon: require("../../assets/img/padicon05.png"),
              name: "unMutiEquaContainer",
              draggable: false,
            },
            // {
            //   text: "四大高手",
            //   type: "1-4",
            //   icon: require("../../assets/img/padicon02.png"),
            //   name: "recommendContainer",
            //   draggable: false,
            // },
            // {
            //   text: "专项分类",
            //   type: "1-5",
            //   icon: require("../../assets/img/padicon03.png"),
            //   name: "firstclassPage",
            //   draggable: false,
            // },
            {
              text: "专项容器",
              type: "1-6",
              icon: require("../../assets/img/padicon03.png"),
              name: "specialContainer",
              draggable: false,
            }
          ]
        },
        {
          title: "推荐·个人中心",    
          group: 'aa',
          comList: [
            {
              text: "一级栏目",
              type: "4-2",
              icon: require("../../assets/img/padicon01.png"),
              name: "tabControl",
              component: 'tabControl',
              draggable: false,
            },
            // {
            //   text: "运营位",
            //   type: "4-3",
            //   icon: require("../../assets/img/padicon06.png"),
            //   name: "operatingBit",
            //   component: 'operatingBit',
            //   draggable: false,
            // },
            // {
            //   text: "推荐应用",
            //   type: "4-4",
            //   icon: require("../../assets/img/padicon07.png"),
            //   name: "recommendAdvert",
            //   component: 'recommendAdvert',
            //   draggable: false,
            // },
            {
              text: "个人中心",
              type: "4-6",
              icon: require("../../assets/img/padicon09.png"),
              name: "memberCenter",
              component: 'memberCenter',
              draggable: false,
            },
            {
              text: "pad底部导航",
              type: "4-7",
              icon: require("../../assets/img/icon02.png"),
              name: "bottomNavigation",
              component: 'bottomNavigation',
              draggable: false,
            },
          ],
        },
        {
          title: "学科内容",
          group: 'aa',
          comList: [
            {
              text: "推荐页",
              type: "4-1",
              icon: require("../../assets/img/padicon10.png"),
              name: "recommendedContent",
              component:'recommendedContent',
              draggable: false,
            },
            {
              text: "PAD同步培优",
              type: "4-5",
              icon: require("../../assets/img/padtbpy.png"),
              name: "privateTutoring",
              component: 'privateTutoring',
              draggable: false,
            },
            {
              text: "专项内容",
              type: "4-3",
              icon: require("../../assets/img/padicon12.png"),
              name: "firstpageContent",
              component:'firstpageContent',
              draggable: false,
            },
            {
              text: "二级内容",
              type: "4-2",
              icon: require("../../assets/img/padicon11.png"),
              name: "secondpageContent",
              component:'secondpageContent',
              draggable: false,
            },
            // {
            //   text: "初中学科",
            //   type: "4-4",
            //   icon: require("../../assets/img/padicon13.png"),
            //   name: "juniorschoolSubject",
            //   component:'juniorschoolSubject',
            //   draggable: false,
            // },
            // {
            //   text: "高中学科",
            //   type: "4-5",
            //   icon: require("../../assets/img/padicon14.png"),
            //   name: "seniorschoolSubject",
            //   component:'seniorschoolSubject',
            //   draggable: false,
            // },
            // {
            //   text: "编程组件",
            //   type: "4-6",
            //   icon: require("../../assets/img/padicon15.png"),
            //   name: "programDiscipline",
            //   component:'programDiscipline',
            //   draggable: false,
            // },
            {
              text: "学科视频",
              type: "4-7",
              icon: require("../../assets/img/icon14.png"),
              name: "subjectVideo",
              component:'subjectVideo',
              draggable: false,
            }
          ],
        }
      ]),
      test: ''
    };
  },
  methods: {
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     * @param {Object} event event对象
     */
    drag (event) {
      /* 开启穿透 */
      this.pointer.show = true;
      /* 传递参数 */
      event.dataTransfer.setData("componentName", event.target.dataset.name);
    },
    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     * @param {Object} event event对象
     */
    dragends () {
      /* 关闭穿透 */
      this.pointer.show = false;
    },
    dragClone (item) {
      let cloneMe = JSON.parse(JSON.stringify(item));
      cloneMe.icon = undefined;
      cloneMe.draggable = undefined;
      console.log('dragClone--------------', item);
      return cloneMe;
    }
  },
  created () {
    if (this.type == "tabbar") {
      this.datas[0].comList[1].draggable = true;
    }
    if (this.type == "home") {
      this.datas[0].comList[0].draggable = true;
      this.datas[0].comList[2].draggable = true;
    }
    if (this.type != "tabbar" && this.type != "home") {
      for (let i = 0; i < this.datas.length; i++) {
        for (let j = 0; j < this.datas[i].comList.length; j++) {
          this.datas[i].comList[j].draggable = true;
        }
      }
    }
  },
  components: { draggable }
};
</script>

<style scoped lang="scss">
/* 组件 */
.sliderassembly {
  width: 275px;
  height: 100%;
  overflow-y: scroll;
  border-right: 1px solid #ebedf0;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;

  /* 滚动条 */
  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #155bd4;
  }

  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border-bottom: 0 !important;
  }

  /* 组件列表 */
  .componList {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 80px;
    height: 88px;
    margin-bottom: 8px;
    align-items: center;
    cursor: all-scroll;
    transition: all 0.3s;

    &:hover {
      background: #155bd4;
      border-radius: 2px;
      font-weight: 700;

      i,
      p,
      span {
        color: #fff;
      }
    }

    /* 图标 */
    i {
      font-size: 32px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      color: #b0a8a8;
      margin-top: 4px;
    }

    /* 标题 */
    p {
      font-size: 12px;
      color: #323233;
      margin-top: 4px;
    }

    /* 数量 */
    span {
      color: #7d7e80;
      margin-top: 4px;
      font-size: 10px;
    }
  }

  .iconimg {
    width: 60px;
    height: 40px;
    -webkit-user-drag: none;
  }
}
</style>
